<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
    <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
    <script src="../../static/js/filter.js" th:src="@{/js/filter.js}"></script>
</head>
<body>
<div id="app" v-cloak>
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">订单管理</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        查看订单列表
                    </p>
                </el-popover>

                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>订单<span>/</span>订单列表</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!-- tab切换 -->
            <div class="z-tabs mb_10">
                <div class="z-tabs_header">
                    <a class="z-tabs_item" :class="{'router-link-active':currentab==0}" @click="queryEatType(0)">
                        <span class="item_span">所有订单</span>
                    </a>
                    <a class="z-tabs_item" :class="{'router-link-active':currentab==eatType.value}" @click="queryEatType(eatType.value)" v-for="eatType in eatTypeList">
                        <span class="item_span">{{eatType.name}}</span>
                    </a>
                </div>
            </div><!-- tab切换 end -->
            <!--条件筛选-->
            <div class="content_item_filter clearfix" v-bind:class="hasfilterMore?'content_filter_more':''">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="订单号/卖家名称/买家名称" v-model="conditions['entityNo#vendorName#customerName'].value" class="minW40 z_input-holder" >
                        </el-input>

                        <el-select v-model="conditions.state.value" clearable placeholder="订单状态" class="z_select-holder">
                            <el-option
                                    v-for="(state,index) in stateList"
                                    :key="index"
                                    :label="state.name"
                                    :value="state.value">
                            </el-option>
                        </el-select>

                        <el-select v-model="conditions.payState.value" clearable placeholder="支付状态" class="z_select-holder">
                            <el-option
                                    v-for="(payState,index) in payStateList"
                                    :key="index"
                                    :label="payState.name"
                                    :value="payState.value">
                            </el-option>
                        </el-select>

                        <el-select v-model="conditions.payType.value" clearable filterable default-first-option placeholder="支付类型" class="z_select-holder">
                            <el-option
                                    v-for="(payType,index) in payTypeList"
                                    :key="index"
                                    :label="payType.name"
                                    :value="payType.value">
                            </el-option>
                        </el-select>

                        <div class="data-picker clearfix">
                            <el-date-picker id="startTime"
                                    v-model="conditions.createTime.value[0]"
                                    type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd 00:00:00"
                                    placeholder="起始日期">
                            </el-date-picker>
                            <div class="center-line"></div>
                            <el-date-picker id="endTime"
                                    v-model="conditions.createTime.value[1]"
                                    type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd 23:59:59"
                                    placeholder="截止日期">
                            </el-date-picker>
                        </div>

                    </div>
                    <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>

                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i v-bind:class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <div class="el-table">
                    <table class="el-table__header order-table" cellpadding="0" cellspacing="0" border="0" style="width:100%">
                        <thead>
                        <tr>
                            <th class="is-leaf z-opt_btn" width="45%"><div class="cell">订单详情</div></th>
                            <th class="is-leaf z-opt_btn" width="10%"><div class="cell">会员</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">实付金额</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">订单状态</div></th>
                            <th class="is-leaf z-opt_btn" width="15%"><div class="cell">订单操作</div></th>
                        </tr>
                        </thead>
                        <tbody v-for="(order,index) in orderList">
                            <tr>
                                <td colspan="5" class="order-title">
                                    <span class="item">{{order.createTime}}   </span>
                                    <span class="item">订单号：   {{order.entityNo}}</span>
                                    <span class="item" v-if="order.eatType==1">桌号：   {{ order.tableNo }}</span>
                                    <el-tooltip class="item" effect="dark" :content="order.eatTypeName" popper-class="order-source-tip" placement="left-start">
                                        <span class="source phone" v-if="order.eatType==1"></span>
                                        <span class="source" v-if="order.eatType==2"></span>
                                    </el-tooltip>
                                </td>
                            </tr>
                            <tr>
                                <td class="order-product-td">
                                    <ul class="order-single-product">
                                        <li title="detail.productName" v-for="(detail,index) in order.detailList" v-if="index<4">
                                            <img :src="detail.productImg">
                                        </li>
                                        <li class="y_more" v-if="order.detailList.length>=5">... 共{{order.detailList.length}}件</li>
                                    </ul>
                                </td>
                                <td>
                                    <el-popover placement="bottom" width="180" popper-class="popover-normal" trigger="hover">
                                        <!--<h3 class="title">张三</h3>
                                        <p class="content">湖北省武汉市江夏区光谷麦郡103号<br/>13100613241</p>-->
                                        <span slot="reference" class="order-user">{{order.customerName}}</span>
                                    </el-popover>
                                </td>
                                <td>
                                    <p class="fc_red f_14"><strong>￥{{order.payPrice|NumberFmt}}</strong></p>
                                    （含运费：￥{{order.deliveryPrice|NumberFmt}}）
                                </td>
                                <td>
                                    <p class="fz_c">{{order.stateName}}</p>
                                    <p class="fz_c">{{order.payStateName}}</p>
                                    <p><a :href="'/vendor/ordermain/toview/' + order.uuid" class="order-btn">订单详情</a></p>
                                </td>
                                <td>
                                    <p v-if="order.state!=1 && order.state!=-1 && order.payState==1"><a href="javascript:void(0)" @click="gathering(index,order.uuid,order.payPrice)" class="order-btn">收款</a></p>
                                    <p v-if="order.state==1"><a href="javascript:void(0)" @click="receive(index,order.uuid)" class="order-btn">接单</a></p>
                                    <p v-if="order.eatType==1 && order.payState==2 && order.state==2"><a href="javascript:void(0)" @click="finish(index,order.uuid)" class="order-btn">完成</a></p>
                                    <p v-if="order.eatType==2 && order.state==2"><a href="javascript:void(0)" @click="delivery(index,order.uuid)" class="order-btn">派送</a></p>
                                    <p v-if="order.eatType==2 && order.payState==2 && order.state==3"><a href="javascript:void(0)" @click="arrived(index,order.uuid)" class="order-btn">送达</a></p>
                                    <p v-if="order.state!=-1 && order.state!=4 && order.state!=5"><a href="javascript:void(0)" @click="cancel(index,order.uuid,order.payState,order.payType)" class="order-btn">取消</a></p>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" align="left">
                                    <span class="order-promotion" v-if="order.mjPrice>0">
                                        下单立减优惠-￥{{order.mjPrice|NumberFmt}}
                                    </span>
                                    <span class="order-promotion" v-if="order.ljPrice>0">
                                        新用户立减-￥{{order.ljPrice|NumberFmt}}
                                    </span>
                                    <span class="order-promotion" v-if="order.vendorCouponFreePrice>0">
                                        优惠券抵扣-￥{{order.vendorCouponFreePrice|NumberFmt}}
                                    </span>
                                    <span class="order-promotion" v-if="order.integralFree>0">
                                        积分抵扣-￥{{order.integralFree|NumberFmt}}
                                    </span>
                                    <span class="order-promotion" v-if="order.otherPrice>0">
                                        其他优惠-￥{{order.otherPrice|NumberFmt}}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[5, 10, 20, 30]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

    <!--收款弹出框-->
    <el-dialog title="收款" :visible.sync="gatheringDialogVisible" width="30%">
    <span>
        <span>收款金额：</span>
        <el-input v-model.number="payPrice" placeholder="请输入金额" style="width: 150px"></el-input>
    </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="gatheringDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureGathering">确 定</el-button>
    </span>
    </el-dialog>
    <!--退款弹出框-->
    <el-dialog title="退款" :visible.sync="refundDialogVisible" width="30%">
    <span>
        <span>退款金额：</span>
        <el-input v-model.number="refundPrice" placeholder="请输入金额" style="width: 150px"></el-input>
    </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="refundDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureRefund">确 定</el-button>
    </span>
    </el-dialog>
</div>
</body>
<script th:inline="javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            currentab:0, //当前切换页
            eatTypeList:[[${eatTypeList}]],
            payStateList:[[${payStateList}]],
            payTypeList: [[${payTypeList}]],
            stateList: [[${stateList}]],
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            conditions: {
                "entityNo#vendorName#customerName": {
                    "operation": "ORLIKE",
                    "value": undefined
                },
                "state": {
                    "operation": "EQ",
                    "value": undefined
                },
                "payState": {
                    "operation": "EQ",
                    "value": undefined
                },
                "payType": {
                    "operation": "EQ",
                    "value": undefined
                },
                "createTime": {
                    "operation": "BETWEEN",
                    "value": []
                },
                "eatType": {
                    "operation": "EQ",
                    "value": undefined
                }
            },
            orderList: [],
            currentOrderUuid:'',//当前操作的订单uuid
            currentIndex:'',//当前操作的订单索引
            payPrice: 0.00, //收款弹出框显示的收款价
            refundPrice: 0.00, //退款弹出框显示的价格
            gatheringDialogVisible:false, //收款弹出框
            refundDialogVisible:false, //退款弹出框
        },
        methods: {
            queryEatType:function(eatType) {
                this.currentab = eatType;
                this.queryByEatType(eatType);
            },
            queryByEatType:function(eatType){
                if (1 == eatType || 2 == eatType) {
                    this.conditions.eatType.value = eatType;
                } else {
                    this.conditions.eatType.value = undefined;
                }
                this.currentPage = 1;
                this.queryList();
            },
            // 列表筛选项更多操作
            toggleMoreSearch(){
                this.filterMore = !this.filterMore;
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions['entityNo#vendorName#customerName'].value = undefined;
                this.conditions.state.value = undefined;
                this.conditions.payState.value = undefined;
                this.conditions.payType.value = undefined;
                this.conditions.createTime.value = [];
            },

            queryList:function () {
                var that = this;
                if (that.conditions) {
                    if (!that.conditions.createTime.value[0] && that.conditions.createTime.value[1]) {
                        that.$message({
                            message: '请选择查询起始日期',
                            type: 'warning',
                            customClass: 'message-center',
                            duration: 1500,
                            onClose: function () {
                                $('#startTime').focus();
                            }
                        });
                        return;
                    }
                    if (that.conditions.createTime.value[0] && !that.conditions.createTime.value[1]) {
                        that.$message({
                            message: '请选择查询截至日期',
                            type: 'warning',
                            customClass: 'message-center',
                            duration: 1500,
                            onClose: function () {
                                $('#endTime').focus();
                            }
                        });
                        return;
                    }
                }

                var conditions = jQuery.extend(true, {}, that.conditions);
                if(conditions.createTime.value.length==0){
                    conditions.createTime.value=undefined;
                }
                let queryMessage = {
                    "queryPage": that.currentPage,
                    "pageShow": that.pageSize,
                    "queryParams": conditions,
                    "sortMap": {
                        "createTime": "desc"
                    }
                };
                $.ajax({
                    url: "/vendor/ordermain/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            that.orderList = data.returnMessage;
                            that.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            //收款
            gathering(index, orderUuid, payPrice) {
                this.payPrice = payPrice;
                vm.gatheringDialogVisible = true;
                vm.currentOrderUuid = orderUuid;
                vm.currentIndex = index;
            },
            // 输入收款金额，确认收款
            sureGathering() {
                var methodName = "/vendor/ordermain/gathering";
                var orderUuid = vm.currentOrderUuid;
                var orderIndex = vm.currentIndex;
                this.gatheringAjax(orderIndex, orderUuid, this.payPrice, methodName);
            },
            //取消
            cancel(index, orderUuid, payState, payType) {
                var title = '确定取消订单？';
                if (payState == 2 && payType == 3) {
                    title = '该订单已支付成功，取消将会产生退款，请确认？';
                    this.refundPrice = this.orderList[index].payPrice;
                    // 展示退款模态框
                    this.refundDialogVisible = true;
                    vm.currentOrderUuid = orderUuid;
                    vm.currentIndex = index;
                } else {
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var methodName = "/vendor/ordermain/cancel";
                        this.doAjax(index, orderUuid, methodName);
                    })
                }

            },
            // 输入退款金额，确认退款
            sureRefund() {
                var methodName = "/vendor/ordermain/cancel";
                var refundMoney = $('#refundMoney').val();
                var orderUuid = vm.currentOrderUuid;
                var orderIndex = vm.currentIndex;
                this.refundAjax(orderIndex, orderUuid, refundMoney, methodName);
            },
            //接单
            receive(index, orderUuid) {
                this.$confirm('确定接单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/receive";
                    this.doAjax(index, orderUuid, methodName);
                })
            },

            //完成
            finish(index, orderUuid) {
                this.$confirm('确认完成订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/finish";
                    this.doAjax(index, orderUuid, methodName);
                })
            },

            //派送
            delivery(index, orderUuid) {
                this.$confirm('确定派送订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/delivery";
                    this.doAjax(index, orderUuid, methodName);
                })
            },
            //送达
            arrived(index, orderUuid) {
                this.$confirm('确定送达订单？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var methodName = "/vendor/ordermain/arrived";
                    this.doAjax(index, orderUuid, methodName);
                })
            },
            doAjax:function (index, orderUuid, methodName) {
                var params = {
                    "id": orderUuid
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.orderList[index];
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            },
            gatheringAjax:function (index, orderUuid, payMoney, methodName) {
                var params = {
                    "id": orderUuid,
                    "payMoney": parseFloat(payMoney),
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data && data.returnCode === 1) {
                            // 关闭收款模态框
                            vm.gatheringDialogVisible = false;
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.orderList[index];
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            },
            refundAjax:function (index, orderUuid, refundMoney, methodName) {
                var payMoney = vm.orderList[index].payMoney;
                if (refundMoney > payMoney) {
                    vm.$message({
                        message: '退款金额不能大于订单金额',
                        type: 'warning',
                        customClass: 'message-center',
                        duration: 1500,
                    });
                    return;
                }

                var params = {
                    "id": orderUuid,
                    "refundMoney": parseFloat(refundMoney)
                };

                $.ajax({
                    url: methodName,
                    type: "POST",
                    data: params,
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data && data.returnCode === 1) {
                            // 关闭退款模态框
                            vm.refundDialogVisible = false;
                            vm.$message({
                                message: data.returnNote,
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                            var result = data.returnMessage;
                            var order = vm.orderList[index];
                            order.state = result.state;
                            order.payState = result.payState;
                            order.stateName = result.stateName;
                            order.payStateName = result.payStateName;
                            order.payTime = result.payTime;
                            order.receiveTime = result.receiveTime;
                            order.deliveryTime = result.deliveryTime;
                            order.finishTime = result.finishTime;
                            order.freePrice = result.freePrice;
                            order.otherPrice = result.otherPrice;
                            order.payPrice = result.payPrice;
                            order.refundState = result.refundState;
                            order.refundStateName = result.refundStateName;
                        } else {
                            vm.$message({
                                message: data.returnNote,
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    }
                });
            }
        },
        mounted: function () {
            var that = this;
            tableMoreSearch(that);

            window.onresize = function() {
                tableMoreSearch(that);
            }

            that.queryList();

        },
        updated: function () {

        }
    });

    function tableMoreSearch(vm){
        var that = vm;
        var $searchForm = $(".content_item_filter .filter-form-one"),
            $searchItem = $(".content_item_filter .filter-form-one > div"),
            $searchMore = $(".filter-form-more > div"),
            itemMax = 0,
            itemWidth = 0,
            singleWidth = 130;
        // that.hasfilterMore = false;
        $searchItem.each(function(index,obj){
            itemWidth += $(obj).outerWidth(true);
            if (itemWidth > $searchForm.width()) {
                itemMax = index-1;
                that.hasfilterMore = true;
                console.log(that.hasfilterMore)
                var $searchMoreItem = $(".content_item_filter .filter-form > div:gt("+itemMax+")");
                $(".filter-form-more").prepend($searchMoreItem);
                return false;
            }
        });
        if(itemWidth < $searchForm.width()-singleWidth && $searchMore.length > 0){
            itemMax = Math.floor(($searchForm.width()-itemWidth)/130);
            console.log(itemMax)
            $searchForm.append($(".filter-form-more > div:lt("+itemMax+")"));
            if (itemMax >= $searchMore.length) {
                that.hasfilterMore = false;
            }
        }
    }
</script>
</html>